import React, { useEffect } from "react";
import "./index.css";
import ClassComponent from "./ClassComponent";

let title = "first title";

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      title = "second title";
    }, 5000);
  }, []);

  return (
    <div>
      <ClassComponent title={title} />
    </div>
  );
};

export default App;

// 检测是否为对象
const isObject = (obj) => {
  return obj !== null && /^(object|function)$/.test(typeof obj);
};

// 浅比较对象的方法
const shallowEqual = (objA, objB) => {
  if (!isObject(objA) || !isObject(objB)) return false;

  if (objA === objB) return true;

  // 比较成员的数量
  const keysA = Reflect.ownKeys(objA),
    keysB = Reflect.ownKeys(objB);

  // 长度不一样默认，return false
  if (keysA.length !== keysB.length) return false;

  // 数量一致，再逐一比较第一级（第一层的属性），浅比较
  for (let i = 0; i < keysA.length; i++) {
    const key = keysA[i];
    // 如果一个对象有一个属性在另一个对象中不存在，或者这个属性两个对象都存在但是值不一样，都视为不相等
    if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
      return false;
    }
  }

  // 如果以上都处理完，发现没有不相同的成员，则认为两个对象都是相等的（第一层是相等的）
  return true;
};

const obj = {
  z: 20,
};

const objA = {
  x: 10,
  obj,
  // arr: [10, 20, 30],
};
obj.n = 1000;

const objB = {
  x: 10,
  obj,
  // arr: [10, 20, 30],
};

console.log(shallowEqual(objA, objB));
